$(function() {
    // 1.需求: 初始化文章分类列表
    let layer = layui.layer
    initArtCateList();

    function initArtCateList() {
        axios({
            method: "GET",
            url: "/my/article/cates",
            // params: 没有参数,省略不写
        }).then(res => {
            // console.log(res.data);
            let obj = res.data;
            if (obj.status !== 0) {
                return layer.msg(obj.message)
            }
            // layer.msg("获取文章列表成功")
            // 成功后渲染页面列表
            let arr = []
            let index = 0
            obj.data.forEach(ele => {
                index++;
                arr.push(`
                    <tr>
                        <td>${index}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id=${ele.Id} class="btn-edit layui-btn layui-btn-xs">编辑</button>
                            <button data-id=${ele.Id} class="btn-delete layui-btn layui-btn-xs layui-btn-danger ">删除</button></td>
                    </tr>
                `)
            });
            $("tbody").empty().html(arr.join(""))
        })
    }

    // 2.需求:点击添加按钮,显示对话框
    let indexAdd = null;
    $("#btnAdd").on("click", function() {
        // 给出弹窗
        indexAdd = layer.open({
            type: 1,
            title: "添加文章分类",
            area: ['400px', '250px'],
            content: `
            <form class="layui-form" id="formAdd">
        <!-- 1 分类名称-->
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 2 分类别名-->
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 3 按钮-->
        <div class="layui-form-item">

            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>`
        });
    })

    // 3.需求: 添加文章分类,事件委托
    $("body").on("submit", "#formAdd", function(e) {
        e.preventDefault();
        axios({
            method: "POST",
            url: "/my/article/addcates",
            data: $(this).serialize()
        }).then(res => {
            // console.log(res.data);
            let obj = res.data
            if (obj.status !== 0) {
                return obj.msg(obj.messgae)
            }
            // 判断是否添加成功,给出提示
            layer.msg("添加文章分类成功");
            // 关闭对话框
            layer.close(indexAdd)
                // 刷新列表显示页面(初始化文章分类列表)
            initArtCateList()
        })
    })

    // 4.需求:点击编辑按钮,显示对话框,事件委托
    let indexEdit = null;
    let form = layui.form;
    $("tbody").on("click", ".btn-edit", function(e) {
        indexEdit = layer.open({
            type: 1,
            title: "修改文章分类",
            area: ['400px', '250px'],
            content: `
            <form lay-filter="formEdit" class="layui-form" id="formEdit">
            <!-- 0 添加隐藏域 -->
            <input type="hidden" name="Id" >
        <!-- 1 分类名称-->
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 2 分类别名-->
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 3 按钮-->
        <div class="layui-form-item">

            <div class="layui-input-block">
                <button  class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>`
        });
        // 5.需求:根据id获取文章分类
        let id = $(this).attr("data-id")
        axios({
            method: "GET",
            url: "/my/article/cates/" + id,
        }).then(res => {
            // console.log(res.data);
            let obj = res.data;
            // 判断是否成功获取分类列表
            if (obj.status != 0) {
                return layer.msg(obj.message)
            }
            //成功后展示数据
            form.val("formEdit", obj.data)
        })
    })

    // 6.需求:将修改后的信息渲染到页面列表
    $("body").on("submit", "#formEdit", function(e) {
        e.preventDefault();
        axios({
            method: "POST",
            url: "/my/article/updatecate",
            data: $(this).serialize()
        }).then(res => {
            // console.log(res.data);
            let obj = res.data
            if (obj.status !== 0) {
                return obj.msg(obj.messgae)
            }
            // 判断是否添加成功,给出提示
            layer.msg("修改文章分类成功");
            // 关闭对话框
            layer.close(indexEdit)
                // 刷新列表显示页面(初始化文章分类列表)
            initArtCateList()
        })
    })

    // 7.需求:删除

    $("tbody").on("click", ".btn-delete", function() {
        let id = $(this).attr("data-id")
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function(index) {
            axios({
                method: "GET",
                url: "/my/article/deletecate/" + id,
            }).then(res => {
                // console.log(res.data);
                let obj = res.data
                if (obj.status != 0) {
                    return layer.mag(obj.message)
                }
                layer.msg("删除文章类别成功")
                initArtCateList()
            })

            layer.close(index);
        });
    })

})